var customPopup = document.createElement("div");
customPopup.textContent = "图片已收藏！";
customPopup.style.position = "fixed";
customPopup.style.top = "-999px";
customPopup.style.left = "50%";
customPopup.style.transform = "translate(-50%, -50%)";
customPopup.style.backgroundColor = "#fff";
customPopup.style.padding = "20px";
customPopup.style.transition = "all .5s ease-in-out";
customPopup.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)";
customPopup.style.zIndex = "9999";
customPopup.id = "imgHre";
customPopup.style.display = "block";
document.body.appendChild(customPopup);
let timer;
function popupWindows(text = "成功", number = 2000) {
  if (timer) {
    clearTimeout(timer); //清除定时器
    customPopup.style.top = "-999px";
  }
  customPopup.style.top = "50%";
  customPopup.textContent = text;
  timer = setTimeout(function () {
    customPopup.style.top = "-999px";
    clearTimeout(timer); //清除定时器
  }, number);
}
// document.body.style.backgroundColor = 'orange';

// 短期的链接
// 给背景页或者popup发送消息
// document.querySelector(".hot-refresh-text").addEventListener("click", async ()=>{
//     alert("点击了");
//     chrome.runtime.sendMessage({greeting: "hello"},function(response){
//         console.log("response",response);
//     });

// })

// 接受背景页的消息
chrome.runtime.onMessage.addListener(function (meg, sender, response) {
  console.log("ssss",meg);
  if (meg.copy === "copy") {
    //复制图片地址
    navigator.clipboard.writeText(meg.text).then(
      function () {
        popupWindows("复制成功");
      },
      function (err) {
        popupWindows("复制失败");
      }
    );
  } else if (meg.copy === "download") {
    //下载图片
    var link = document.createElement("a");
    link.href = meg.blob;
    link.download = new Date().getTime();
    link.style.display = "none";
    link.click();
    popupWindows("下载成功");
  }
});

// 长期的链接

var port = chrome.runtime.connect({ name: "knockkno2ck" });

port.postMessage({ joke: "" });

port.onMessage.addListener(function (msg) {
  if (msg.question === "收藏成功") {
    console.log("111111", msg.question);
  } else if (msg.question === "收藏失败") {
    console.log("2222", msg.question);
  } else if (msg.iurs === "12") {

    var link = document.createElement("a");
    link.href = msg.blob;
    link.download = new Date().getTime();
    link.style.display = "none";
    link.click();
  }
});

var divImg = document.createElement("div");
divImg.style.position = "fixed";
divImg.style.top = "50%";
divImg.style.left = "50%";
// divImg.style.transform = "translate(-50%, -50%)";
divImg.style.backgroundColor = "#fff";
divImg.style.padding = "20px";
divImg.style.transition = "all .5s ease-in-out";
divImg.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)";
divImg.style.zIndex = "9999";
divImg.id = "divImg";
divImg.style.display = "block";
divImg.innerHTML = `
 <div>下载视屏</div>
 <input id="inputVideo"></input>
 <button id="ibuton">下载图片</button>
`;

document.body.appendChild(divImg);

// 下载图片

function imgDownload(meg) {
  port.postMessage({ menuItemId: "urlDow", url: meg });

  //   chrome.runtime.sendMessage({menuItemId: "urlDow",url:meg},function(response){
  //       console.log("response",response);

  //  });

  //图片地址和网页地址不一样时会跨域
  //   var img = new Image();
  //   img.crossOrigin = "Anonymous"; // 设置跨域属性
  //   img.src = meg;
  // //   当图片加载完成后执行下载操作
  //   img.onload = function () {
  //     var canvas = document.createElement("canvas");
  //     canvas.width = img.width;
  //     canvas.height = img.height;
  //     var ctx = canvas.getContext("2d");
  //     ctx.drawImage(img, 0, 0, img.width, img.height);
  //     canvas.toBlob(function (blob) {
  //       var url = URL.createObjectURL(blob);
  //       // 创建一个隐藏的链接并设置下载属性
  //       var a = document.createElement("a");
  //       a.href = url;
  //       let time = new Date().getTime();
  //       a.download = time;
  //       document.body.appendChild(a);
  //     //   a.click();
  //     //   document.body.removeChild(a);
  //       URL.revokeObjectURL(url);
  //     });
  //   };
}


//点击继续获取  为网页上添加的

function downloadImg() {
  let imgArr = Array.from(document.querySelectorAll("img"));
  let number = 0;
  let time = setInterval(() => {
    if (number >= imgArr.length - 1) {
      clearInterval(time);
    }
    number = number + 1;
    imgDownload(imgArr[number].src);
  }, 500);
}
document.querySelector("#ibuton").addEventListener("click", downloadImg);
